<!--
* @description 警情订阅
* @author zywu
* @date 2021/11/09 16:20:33
!-->
<template>
  <div class="page-subscribe">
    <div class="head d-flex ai-center">
      <div class="cancel" @click="handleCancel">取消</div>
      <div class="title flex-1 text-center">选择建筑物</div>
      <div class="confirm" @click="handleSave">确定</div>
    </div>
    <div class="content">
      <treeselect class="my-treeselect" v-model="value" :multiple="true" :options="options" alwaysOpen :default-expand-level="1" value-consists-of="ALL">
        <div slot="option-label" slot-scope="{ node }">{{ node.raw.text }}</div>
      </treeselect>
    </div>
  </div>
</template>

<script>
import {
  getOrgFbsTree,
  getUserBuildByAccount,
  saveSubscribe,
} from '@/api/common'
import { mapState } from 'vuex'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: { Treeselect },

  data() {
    return {
      value: [],
      options: [],
    }
  },

  computed: {
    ...mapState(['userInfo']),
  },

  created() {
    this.getOrgFbsTree()
  },

  mounted() {},

  methods: {
    handleSave() {
      if (this.loading) return
      console.log(this.value)
      this.loading = true
      let toast = this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
      })
      saveSubscribe({
        id: this.id,
        userAccount: this.userInfo.accountName,
        relateBuildIds: this.value.join(','),
      })
        .then((res) => {
          this.loading = false
          toast.clear()
          if (res.status == 200) {
            this.$toast('保存成功')
            this.handleCancel()
          } else {
            this.$toast(res.info)
          }
        })
        .catch(() => {
          this.loading = false
          toast.clear()
        })
    },
    getUserBuildByAccount() {
      getUserBuildByAccount({
        account: this.userInfo.accountName,
      }).then((res) => {
        if (res.data) {
          this.id = res.data.id
          this.value = res.data.relateBuildIds
            ? res.data.relateBuildIds.split(',').map((n) => {
                return parseInt(n)
              })
            : []
        }
      })
    },
    getOrgFbsTree() {
      getOrgFbsTree({
        orgIds: this.userInfo.isMuilUnitUser==1?this.userInfo.organizationIds:this.userInfo.org.id,
        buildId: 0,
      }).then((res) => {
        let list = res.data
        this.formatData(list)
        this.options = list
        this.getUserBuildByAccount()
      })
    },
    formatData(data) {
      data.forEach((n) => {
        if (n.nodes) {
          n.children = [].concat(n.nodes)
          delete n.nodes
          this.formatData(n.children)
        }
      })
    },
    handleCancel() {
      try {
        window.top.app.router.back()
      } catch (e) {}
    },
  },
}
</script>
<style lang='scss'>
.page-subscribe {
  .head {
    background: #fff;
    border-bottom: 1px solid rgba(225, 225, 225, 0.5);
  }
  .cancel,
  .confirm {
    padding: 10px;
    color: #2196f3;
  }
  .cancel {
    margin-left: 5px;
  }
  .confirm {
    margin-right: 5px;
  }
  .title {
    font-size: 16px;
    color: #333;
  }
  .content {
    padding: 5px 5px 0;
    height: calc(100vh - 53px);
    overflow-y: auto;
  }
}
</style>